<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>图书管理</title>
  <link rel="stylesheet" href="../css/bootstrap.css" />
  <script src="../js/jquery.min.js"></script>
  <script src="../js/axios.min.js"></script>
</head>

<body style="padding: 15px;">
  <!-- 添加图书的Panel面板 -->
  <form class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">添加新图书</h3>
    </div>
    <div class="panel-body form-inline" style="display: flex; justify-content: space-between; ">

      <div class="input-group">
        <div class="input-group-addon">书名</div>
        <input type="text" class="form-control" id="iptBookname" placeholder="请输入书名" name="bookname">
      </div>

      <div class="input-group">
        <div class="input-group-addon">作者</div>
        <input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者" name="author">
      </div>

      <div class="input-group">
        <div class="input-group-addon">出版社</div>
        <input type="text" class="form-control" id="iptPublisher" placeholder="请输入出版社" name="publisher">
      </div>

      <button id="btnAdd" class="btn btn-primary">添加</button>

    </div>
  </form>


  <!-- 图书的表格 -->
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th>Id</th>
        <th>书名</th>
        <th>作者</th>
        <th>出版社</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="tb"></tbody>
  </table>

  <script>
    const shuming = document.querySelector('#iptBookname')
    const zuozhe = document.querySelector('#iptAuthor')
    const chubanshe = document.querySelector('#iptPublisher')
    const tb = document.querySelector('#tb')
    const add = document.querySelector('#btnAdd')
    const renderer = () => {
      tb.innerHTML = ''
      //发起get请求
      axios({
        method: 'GET',//请求方式
        url: 'http://liulongbin.top:3006/api/getbooks',//请求的url地址
      })
        .then(res => {
          const { data } = res.data
          const newStr = data.map(item => `
              <tr>
                <td>${item.id}</td>
                <td>${item.bookname}</td>
                <td>${item.author}</td>
                <td>${item.publisher}</td>
                <td>
                  <a href="javascript:;"data-id="${item.id}" class='del'>删除</a>
                </td>
              <tr/>
        `).join('')
          tb.innerHTML = newStr
        })
        .catch(err => {
          alert('请求数据失败')
        })
    }
    renderer()
    add.addEventListener('click', () => {
      const data = {
        bookname: shuming.value.trim(),
        author: zuozhe.value.trim(),
        publisher: chubanshe.value.trim()
      }
      if (!data.bookname && !data.author && !data.publisher) return alert('内容不能为空！')

      axios({
        method: 'post',
        url: 'http://liulongbin.top:3006/api/addbook',
        data: data
      })
        .then(res => {
          renderer()
        })

        .catch(arr => {
          alert('请求数据失败')
        })
    })
    tb.addEventListener('click', e => {
      if (e.target.tagName === 'A') {
        const bookId = e.target.dataset.id
        axios.get('http://liulongbin.top:3006/api/delbook', { params: { id: bookId } })
          .then(res => {
            console.log(res)
            renderer()
          })
          .catch(err => {
            alert('请求数据失败')
          })
      }
    })
    $("form").on('submit', function (e) {
      e.preventDefault()
      const data = $(this).serialize()
      console.log(data)
    })
  </script>

</body>

</html>